import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
// import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Collapse, Input, Col, Empty } from 'antd';

const { Panel } = Collapse;

@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
class DeviceCommandRecord extends PureComponent {
  state = {
    serviceList: [],
  };

  componentDidMount() {
    const { dispatch, params } = this.props;
    const { changeServices } = this;
    dispatch({
      type: 'devices/fetchDeviceServices',
      payload: params.id,
      changeServices,
    });
  }

  changeServices = val => {
    this.setState({
      serviceList: val,
    });
  };

  onChange = (event, serviceIndex, paramIndex) => {
    const { serviceList } = this.state;
    if (event && event.target) {
      const val = event.target.value;
      const serviceParams = serviceList[serviceIndex].serviceParamList;
      serviceParams.map((item, _index) => {
        if (_index === paramIndex) {
          item.value = val;
          return item;
        }
        return item;
      });
      this.updateArrayItem(serviceIndex, 'serviceParamList', serviceParams);
    }
  };

  updateArrayItem = (index, key, value) => {
    const { serviceList } = this.state;
    this.setState({
      serviceList: serviceList.map((item, _index) =>
        _index === index ? { ...item, [key]: value } : item,
      ),
    });
  };

  genExtra = item => (
    <span
      onClick={event => {
        event.stopPropagation();
        const { dispatch, params } = this.props;
        console.log(JSON.stringify(item));
        console.log(item.serviceParamList);
        dispatch({
          type: 'devices/serviceExecute',
          payload: {
            deviceId: params.id,
            serviceId: item.id,
            serviceParamList: item.serviceParamList,
          },
        });
      }}
    >
      发送
    </span>
  );

  render() {
    const { serviceList } = this.state;

    const showPanel = data =>
      data.map((item, i) => (
        <Panel header={item.name} key={i.toString()} extra={this.genExtra(item)}>
          {item.serviceParamList
            ? item.serviceParamList.map((params, indx) => (
                <Row style={indx > 0 ? { marginTop: 10 } : undefined} key={indx.toString()}>
                  <Col span={3} style={{ textAlign: 'center' }}>
                    <div>{params.label}</div>
                  </Col>
                  <Col span={10}>
                    <Input
                      defaultValue={params.value}
                      onChange={event => this.onChange(event, i, indx)}
                    />
                  </Col>
                </Row>
              ))
            : undefined}
        </Panel>
      ));

    return (
      <Fragment>
        <Row>
          {serviceList && serviceList.length > 0 ? (
            <Col span={24}>
              <Collapse defaultActiveKey={['0']} expandIconPosition="left">
                {showPanel(serviceList)}
              </Collapse>
            </Col>
          ) : (
            <Empty />
          )}
        </Row>
      </Fragment>
    );
  }
}

export default DeviceCommandRecord;
